<template>
  <div class="box" style="width: 90%; height: 500px">
    <draggable
      v-model="items"
      group="site"
      animation="100"
      dragClass="dragClass"
      ghostClass="ghostClass"
      chosenClass="chosenClass"
    >
      <transition-group>
        <div class="item" v-for="item in items" :key="item.id">
          {{ item.name }}
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { id: 1, name: "item-1" },
        { id: 2, name: "item-2" },
        { id: 3, name: "item-3" },
        { id: 4, name: "item-4" },
        { id: 5, name: "item-5" },
        { id: 6, name: "item-6" },
        { id: 7, name: "item-7" },
        { id: 8, name: "item-8" },
        { id: 9, name: "item-9" },
      ],
    };
  },
};
</script>

<style scoped>
.box > div > span {
  display: grid;
  grid-template-rows: 100px 100px 200px;
  grid-template-columns: 200px 1fr 1fr;
  row-gap: 10px;
  column-gap: 10px;
  grid-auto-flow: row dense;
}
.item {
  background-color: rgb(135, 222, 179);
  border: 1px solid #333;
}
.item:nth-of-type(1) {
  background-color: rgb(175, 156, 245);
  grid-column: 1/ 3;
  grid-row: 1/ 1;
}
.item:nth-of-type(2) {
  grid-column-start: span 2;
  background-color: darkkhaki;
}
.item:nth-of-type(3) {
  grid-row-start: span 2;
  background-color: green;
}
.chosenClass {
  background-color: brown;
}
</style>